<template>
  <el-card>
    <el-input v-model="roleName" disabled />
    <el-tree
      class="role-tree"
      :data="permissionList"
      :props="{
        children: 'children',
        label: 'name',
      }"
      node-key="id"
      show-checkbox
      default-expand-all
      ref="treeRef"
    />
    <el-button type="primary" @click="assignRolePermission">确定</el-button>
    <el-button @click="cancel">取消</el-button>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "RoleAuth",
};
</script>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getRolePermissionListApi,
  assignRolePermissionApi,
} from "@/api/acl/permission";
import type { PermissionList } from "@/api/acl/model/permissionModel";
import { ElMessage } from "element-plus";

const route = useRoute();
const roleName = route.query.roleName as string;

const treeRef = ref();

const permissionList = ref<PermissionList>([]);
onMounted(async () => {
  const res = await getRolePermissionListApi(route.query.id as string);
  permissionList.value = res.children;
  const ids = getSelectedIds(res.children);
  treeRef.value.setCheckedKeys(ids);
});

/*
  遍历所有菜单，判断菜单是有拥有子菜单（permission.children && permission.children.length）
    有子菜单，继续遍历子菜单，将子菜单id和当前菜单id合并
    没有子菜单，判断是否选中，选中添加id
*/
const getSelectedIds = (permissionList: PermissionList) => {
  let ids: string[] = [];
  permissionList.forEach((permission) => {
    if (permission.children && permission.children.length) {
      const childrenIds = getSelectedIds(permission.children);
      ids = [...ids, ...childrenIds];
    } else {
      if (permission.select) {
        ids.push(permission.id);
      }
    }
  });
  return ids;
};

// 获取所有select: true的元素的id
// 所有子菜单的子菜单都select: true，父级才能添加进去
// const getSelectedIds = (permissionList: PermissionList) => {
//   let ids: string[] = [];

//   permissionList.forEach((permission) => {
//     if (permission.children && permission.children.length) {
//       // 有子菜单
//       const childrenIds = getSelectedIds(permission.children);
//       // 当所有子菜单（包含子菜单的子菜单）选中了，才能添加父级菜单id
//       if (getAllPermissionSelected(permission.children)) {
//         ids.push(permission.id);
//       }

//       ids = [...ids, ...childrenIds];
//     } else {
//       // 没有子菜单
//       if (permission.select) {
//         ids.push(permission.id);
//       }
//     }
//   });

//   return ids;
// };

// 得到子菜单是否全选
// const getAllPermissionSelected = (permissionList: PermissionList) => {
//   for (let i = 0; i < permissionList.length; i++) {
//     const permission = permissionList[i];

//     if (!permission.select) {
//       return false;
//     }

//     if (permission.children && permission.children.length) {
//       const isCheckAll = getAllPermissionSelected(permission.children);
//       if (!isCheckAll) {
//         return false;
//       }
//     }
//   }

//   return true;
// };
const router = useRouter();
const cancel = () => {
  router.push({
    name: "Role",
  });
};
const assignRolePermission = async () => {
  // 获取所有选中的key
  const checkedKeys = treeRef.value.getCheckedKeys();
  // 获取所有半选的key
  const halfCheckedKeys = treeRef.value.getHalfCheckedKeys();

  await assignRolePermissionApi(route.query.id as string, [
    ...checkedKeys,
    ...halfCheckedKeys,
  ]);

  ElMessage.success("分配角色权限成功");
  cancel();
};
</script>

<style scoped>
.role-tree {
  margin: 10px 0;
}
</style>
